<template>
  <div>
    <p @click="dis1">文本工具</p>
    <ul v-show="flag1">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p @click="dis2">语言工具</p>
    <ul v-show="flag2">
      <li>1</li>
      <li @click="add">一句诗词</li>
      <li>3</li>
    </ul>
    <p @click="dis3">转换工具</p>
    <ul v-show="flag3">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p @click="dis4">日期时间</p>
    <ul v-show="flag4">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p @click="dis5">便民查询</p>
    <ul v-show="flag5">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p @click="dis6">开发工具</p>
    <ul v-show="flag6">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p @click="dis7">编码加密</p>
    <ul v-show="flag7">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p @click="dis8">站长工具</p>
    <ul v-show="flag8">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag1: false,
      flag2: false,
      flag3: false,
      flag4: false,
      flag5: false,
      flag6: false,
      flag7: false,
      flag8: false,
      flag:false
    };
  },
  methods: {
    dis1() {
      this.flag1 = !this.flag1;
    },
    dis2() {
      this.flag2 = !this.flag2;
    },
    dis3() {
      this.flag3 = !this.flag3;
    },
    dis4() {
      this.flag4 = !this.flag4;
    },
    dis5() {
      this.flag5 = !this.flag5;
    },
    dis6() {
      this.flag6 = !this.flag6;
    },
    dis7() {
      this.flag7 = !this.flag7;
    },
    dis8() {
      this.flag8 = !this.flag8;
    },
    add(){
      // let flag;
       flag=true;
    }
  },
};
</script>
<style lang="scss" scoped>
p {
  color: #99a6b3;
  text-align: center;
  cursor: pointer;
}
li {
  list-style: none;
}
ul {
  padding: 0;
  color: #99a6b3;
  text-align: center;
  cursor: pointer;
  /* display: none; */
}
</style>